<template>
  <div class="filter-dialog">
    <el-dialog
      title=""
      v-model="filter_dialog"
      width="50%"
      center
      destroy-on-close
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <div class="dialog-content">
        <el-form :label-width="labelWidth" style="max-width: 90%">
          <el-row :gutter="20">
            <template v-for="item in formItems" :key="item.label">
              <el-col v-bind="colLayout">
                <el-form-item
                  v-if="!item.isHidden"
                  :label="item.label"
                  :rules="item.rules"
                  :style="itemStyle"
                >
                  <template v-if="item.type === 'select'">
                    <el-select
                      class="item_row"
                      :placeholder="item.placeholder"
                      v-model="filter_field[`${item.field}`]"
                      clearable
                      size="small"
                    >
                      <el-option
                        v-for="option in item.options"
                        :key="option.value"
                        :label="option.label"
                        :value="option.value"
                      />
                    </el-select>
                  </template>
                  <template v-else-if="item.type === 'input'">
                    <el-tooltip
                      :content="filter_field[item.field]"
                      :disabled="show_tooltip(filter_field[item.field])"
                    >
                      <el-input
                        class="item_row"
                        v-model="filter_field[item.field]"
                        size="small"
                        :show-word-limit="true"
                      />
                    </el-tooltip>
                  </template>
                </el-form-item>
              </el-col>
            </template>
          </el-row>
        </el-form>
        <slot></slot>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="handleFilterClick">
            Filter
          </el-button>
          <el-button @click="handleReset">Reset</el-button>
          <el-button @click="filter_dialog = false">Cancel</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineProps, PropType, defineExpose, defineModel } from 'vue'
// import { useStore } from '@/store'
import { IFormItem } from '../types'

// 定义props
// const props = withDefaults(
//   defineProps<{
//     modalConfig: any
//     width?: string
//     height?: string
//   }>(),
//   {
//     width: '100%',
//     height: '360px'
//   }
// )
const filter_field = defineModel<any>('filter_field')

const props = defineProps({
  parentMethod: {
    type: Function,
    required: true
  },
  pageInfo: {
    type: Object,
    required: true
  },
  formItems: {
    type: Array as PropType<IFormItem[]>,
    default: () => []
  },
  labelWidth: {
    type: String,
    default: '100px'
  },
  itemStyle: {
    type: Object,
    default: () => ({ padding: '10px 40px' })
  },
  colLayout: {
    type: Object,
    default: () => ({
      xl: 6, // >1920px 4个
      lg: 8,
      md: 12,
      sm: 24,
      xs: 24
    })
  }
})

// const store = useStore()
const filter_dialog = ref(false)
const handleFilterClick = () => {
  console.log('click filter confirm...')
  console.log('1221', filter_field.value)
  filter_dialog.value = false
  // getPageData(filter_field.value)
  props.parentMethod(filter_field.value)
}

const handleClose = () => {
  console.log('click handleClose')
  // done()
  filter_dialog.value = false
}

const handleReset = () => {
  console.log('click reset btn')
  for (const key in filter_field.value) {
    if (key == 'is_archive') {
      continue
    }
    filter_field.value[key] = ''
  }
  console.log(filter_field.value)
  // getPageData(filter_field.value)
  props.parentMethod(filter_field.value)
  filter_dialog.value = false
}

const show_tooltip = (val: string) => {
  if (val) {
    if (val.length >= 10) {
      return false
    }
    return true
  }
  return true
}

// console.log('122233', filter_field)
// const emit = defineEmits(['update:modelValue'])
// watch(filter_field, (newVal) => {
//   emit('update:modelValue', newVal)
// })
// watch(filter_field, () => {
//   getPageData(filter_field.value)
// })
// const handleValueChange = (value: any, field: string) => {
//   emit('update:modelValue', { ...props.modelValue, [field]: value })
// }

// const getPageData = async (filter_field: any = {}) => {
//   console.log('requet user data')
//   store.dispatch('system/getPageListAction', {
//     pageName: 'user',
//     queryInfo: {
//       offset: (props.pageInfo.currentPage - 1) * props.pageInfo.pageSize,
//       size: props.pageInfo.pageSize,
//       filter_field
//     }
//   })
// }

defineExpose({
  filter_dialog
})
</script>

<style>
.item_row {
  width: 100%;
  margin-left: 10px;
  margin-right: 10px;
}
</style>
